<template>
  <div>
    <div>
      <div style="margin-top: 5%; margin-left: 2%; float: left">
        <van-icon name="arrow-left" style="font-size: 25px" @click="back" />
      </div>
      <div style="margin-top: 5%; margin-right: 3%; float: right">
        <van-button
          @click="gotologin"
          round
          size="small"
          color="linear-gradient(to right, #FF99CC, #9999FF)"
        >
          Login
        </van-button>
      </div>
    </div>

    <div style="padding-top: 15%; text-align: left; padding-left: 7%">
      <van-image width="130px" height="100px" fit="contain" :src="logo" />
    </div>

    <van-divider :style="{ borderColor: '#FFCCCC', padding: '0 16px' }" />

    <div style="margin-top: 10%" :model="registerForm">
      <span style="float: left; margin-left: 3.5%; color: #ff99cc"
        >Username</span
      >
      <van-field
        style="
          border-style: solid;
          width: 95%;
          margin: 0 auto;
          border-radius: 7px;
        "
        v-model="registerForm.username"
        clearable
        placeholder="用户名"
      />
      <p></p>
      <span style="float: left; margin-left: 3.5%; color: #ff99cc"
        >Password</span
      >
      <van-field
        style="
          border-style: solid;
          width: 95%;
          margin: 0 auto;
          border-radius: 7px;
        "
        v-model="registerForm.password"
        clearable
        placeholder="密码"
      />
      <p></p>
      <span style="float: left; margin-left: 3.5%; color: #ff99cc">Email</span>
      <van-field
        style="
          border-style: solid;
          width: 95%;
          margin: 0 auto;
          border-radius: 7px;
        "
        v-model="registerForm.email"
        clearable
        placeholder="邮箱"
      />

      <p></p>
      <van-checkbox style="margin-left: 3.5%" v-model="checked" shape="square">
        <p style="text-align: justify; width: 90%; font-size: 13px">
          Creating an account means you’re okay with our Terms of Service。
        </p>
      </van-checkbox>
    </div>

    <div style="width: 90%; margin: 0 auto; margin-top: 5%">
      <van-button @click="register(registerForm)" style="border-radius: 7px" color="#FF99CC" size="large"
        ><p style="font-size: 20px">Create Account</p></van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button, Divider, Field, Checkbox, CheckboxGroup ,Notify} from "vant";
import { Image as VanImage } from "vant";
Vue.use(VanImage);
import loginRequst from "@/api/login";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Divider.name]: Divider,
    [Field.name]: Field,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Notify.name]:Notify
  },
  data() {
    return {
      registerForm: {
        username: "",
        email: "",
        password: "",
      },
      checked: false,
      logo: require("../../assets/icon/crazyLogo.png"),
    };
  },
  methods: {
    back() {
      //指定跳转的地址 this.$router.replace('/menu')
      this.$router.replace("/person");
    },
    gotologin() {
      //指定跳转的地址 this.$router.replace('/menu')
      this.$router.replace("/login");
    },
    register(registerForm) {
      loginRequst.registerUser(registerForm.username , registerForm.password ,registerForm.email)
        .then((res)=>{
           Notify({ type: "success", message: "注册成功" })

           this.$router.push("/login");
        })
        .catch((err)=>{
          Notify({ type: "warning", message: "注册失败" })
        })
    }
  }
}
</script>

<style>
</style>